import React, { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { ImageBackground, StyleSheet, Text, View, TouchableOpacity, TextInput, ToastAndroid } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage'
import { useAuth } from '../context/AuthProvider';
import axios from '../api/axios'
const Btn = ({ children, style, color, ...rest }) => {
    return (
        <TouchableOpacity {...rest} style={
            {
                justifyContent: "center",
                alignItems: "center",
                ...style
            }
        }>
            <Text style={{ color: color ? color : '#FFF', fontSize: 18 }}>{children}</Text>
        </TouchableOpacity>
    )
}
const Register = ({navigation}) => {
    const [mobile, setMobile] = useState("");
    const [username, setUsername] = useState("");
    const [pwd, setPwd] = useState("");
    const [pwd1, setPwd1] = useState("");
    const register = () => {
        // navigation.navigate('login');
        if(mobile.length!=11){
            ToastAndroid.show("手机号输入错误，请检查后重试！", ToastAndroid.SHORT);
        } else if(pwd!=pwd1){
            ToastAndroid.show("密码不一致，请检查后重试！", ToastAndroid.SHORT);
        }else{
            axios.post('/users/register', {username, mobile, pwd}).then(res=>{
                ToastAndroid.show(res.msg, ToastAndroid.SHORT);
                navigation.navigate('login')
            })
        }
    }
    return (
        <View style={styles.container}>
            <StatusBar style="auto" />
            <TextInput
                style={styles.input}
                placeholder="手机号"
                value={mobile}
                onChangeText={text => setMobile(text)}
            />
            <TextInput
                style={styles.input}
                placeholder="用户名"
                value={username}
                onChangeText={text => setUsername(text)}
            />
            <TextInput
                style={styles.input}
                placeholder="密码"
                value={pwd}
                onChangeText={text => setPwd(text)}
                secureTextEntry={true}
            />
            <TextInput
                style={styles.input}
                placeholder="确认密码"
                value={pwd1}
                onChangeText={text => setPwd1(text)}
                secureTextEntry={true}
            />
            <Btn
                style={{
                    backgroundColor: "#04543f",
                    width: 300,
                    height: 44,
                    borderRadius: 7,
                    marginTop:15
                }}
                onPress={register}
            >
                注册
        </Btn>
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        paddingTop: 150
    },
    input: {
        width: 300,
        height: 40,
        color: '#04543f',
        borderColor: '#D0EFE7',
        borderRadius: 7,
        borderWidth: 1,
        paddingLeft: 18,
        marginBottom: 20
    }
});

export default Register
